<template>
  <div ref="chartsContainer" class="charts-container">
    <div class="chart" ref="chart1"></div>
    <div class="chart" ref="chart2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "GymStatus",
  mounted() {
    this.initECharts();
  },
  methods: {
    initECharts() {
      const chart1 = echarts.init(this.$refs.chart1);
      const chart2 = echarts.init(this.$refs.chart2);

      const option = {
        title: {
          text: "健身房状况"
        },
        tooltip: {},
        xAxis: {
          data: ["当前人数", "安全状况", "管理员人数", "教练人数", "今日人次"]
        },
        yAxis: {},
        series: [
          {
            name: "Stats",
            type: "bar",
            data: [80, 200, 20, 20, 500]
          }
        ]
      };

      chart1.setOption(option);
      chart2.setOption(option);
    }
  }
};
</script>

<style scoped>
.charts-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart {
  flex: 1;
  margin: 10px;
}
</style>
